<template>
  <div>
    <!-- 选择分类的卡片 -->
    <el-card style="margin-top: 20px">
      <CategorySelect
        @getCategoryId="getCategoryId"
        :showSelect="showCard !== 0"
      ></CategorySelect>
    </el-card>
    <!-- 展示spu列表数据的卡片 -->
    <el-card style="margin-top: 20px" v-show="showCard === 0">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="AddSpu"
        :disabled="!category3Id"
        >添加SPU</el-button
      >
      <el-table :data="spuInfoList.records" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="spuName" label="SPU名称"> </el-table-column>
        <el-table-column prop="description" label="SPU描述"> </el-table-column>
        <el-table-column prop="handle" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="success"
              icon="el-icon-plus"
              size="mini"
              title="添加sku"
              @click="goAddSku(row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              title="修改spu"
              @click="updateSaleAttr(row)"
            ></el-button>
            <el-button
              type="info"
              icon="el-icon-info"
              size="mini"
              @click="showDialog(row)"
              title="查看当前spu全部sku列表"
            ></el-button>
            <el-popconfirm
              :title="`确定删除${row.spuName}吗?`"
              style="margin-left: 10px"
              @onConfirm="deleteSpu(row)"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                title="删除spu"
                slot="reference"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="spuInfoList.searchCount"
        :current-page.sync="page"
        :pager-count="7"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="limit"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="spuInfoList.total"
        align="center"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
      <el-dialog
        :title="`${title}的sku列表`"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-table
          :data="skuInfoList"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="skuName" label="名称"> </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
          <el-table-column prop="weight" label="重量"> </el-table-column>
          <el-table-column prop="skuDefaultImg" label="默认图片">
            <template slot-scope="{ row }">
              <img :src="row.skuDefaultImg" alt="" width="100px" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
    <!-- 添加|修改spu数据的卡片 -->
    <el-card style="margin-top: 20px" v-show="showCard === 1">
      <AddOrModifySpu
        @updataShowCard="updataShowCard"
        :category3Id="category3Id"
        ref="addOrUpdateSpu"
      ></AddOrModifySpu>
    </el-card>
    <!-- 添加sku的卡片 -->
    <el-card style="margin-top: 20px" v-show="showCard === 2">
      <AddSku ref="addSku" @updataShowCard="updataShowCard"></AddSku>
    </el-card>
  </div>
</template>

<script>
// 引入子组件
import AddOrModifySpu from "./AddOrModifySpu";
import AddSku from "./AddSku";
export default {
  name: "Spu",
  data() {
    return {
      // 一级分类id
      category1Id: "",
      // 二级分类id
      category2Id: "",
      // 三级分类id
      category3Id: "",
      // 当前页数
      page: 1,
      // 每页显示的条数
      limit: 3,
      // spu数据列表
      spuInfoList: {},
      // 控制显示哪个卡片  0: 展示spu数据   1: 添加|修改spu   2: 添加sku
      showCard: 0,
      // 控制对话框的显示与隐藏
      dialogVisible: false,
      // sku数据列表
      skuInfoList: [],
      // 标题
      title: "",
      // 加载时的动画效果
      loading: true
    };
  },
  // 注册组件
  components: {
    AddOrModifySpu,
    AddSku,
  },
  methods: {
    getCategoryId(categoryIdList) {
      const { category1Id, category2Id, category3Id } = categoryIdList;
      this.category1Id = category1Id;
      this.category2Id = category2Id;
      this.category3Id = category3Id;
      if (this.category3Id) {
        this.getSpuInfoList();
      } else {
        this.spuInfoList = {};
      }
    },
    // 获取spu的数据
    async getSpuInfoList() {
      const { page, limit, category3Id } = this;
      const result = await this.$API.spu.reqSpuInfoList(
        page,
        limit,
        category3Id
      );
      if (result.code === 200) {
        this.spuInfoList = result.data;
        this.page = result.data.current;
      }
    },
    // 当前页发生改变时触发
    handleCurrentChange(page) {
      // 修改当前页
      this.page = page;
      // 重新发送请求，获取新的数据
      this.getSpuInfoList();
    },
    // 当前页面显示的条数发生变化时触发
    handleSizeChange(limit) {
      // 修改页面显示的条数的数据
      this.limit = limit;
      this.page = 1;
      // 重新发送请求
      this.getSpuInfoList();
    },
    // 点击添加Spu按钮，修改showCard的值，展示添加Spu页面
    AddSpu() {
      this.showCard = 1;
      // 加载品牌信息跟销售属性信息
      this.$refs.addOrUpdateSpu.getTrademarkList();
      this.$refs.addOrUpdateSpu.getSaleAttrList();
    },
    // 根据子组件传过来的数据
    updataShowCard(num, id) {
      // 根据传过来的num，判断是点击了保存还是取消(1: 保存，无参数：取消)
      if (num === 1) {
        if (id) {
          // id不为空，是修改操作，修改完停留在当前页
          // 重新获取spu列表的数据
          this.getSpuInfoList();
        } else {
          // 添加操作，添加完回到第一页
          this.page = 1;
          // 重新获取spu列表的数据
          this.getSpuInfoList();
        }
      }
      this.showCard = 0;
    },
    // 修改spu
    updateSaleAttr(row) {
      // 初始化spu
      this.$refs.addOrUpdateSpu.initSpuList(row);
      // 显示添加|修改的卡片
      this.showCard = 1;
      // 初始化照片墙
      this.$refs.addOrUpdateSpu.initSpuImageList(row);
      // 加载品牌信息跟销售属性信息
      this.$refs.addOrUpdateSpu.getTrademarkList();
      this.$refs.addOrUpdateSpu.getSaleAttrList();
    },
    // 删除spu
    async deleteSpu(row) {
      try {
        await this.$API.spu.reqDeleteSpu(row.id);
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 如果删除的那页就只有一条数据，那么要去到上一页
        if (this.spuInfoList.records.length <= 1) {
          this.page = this.page - 1;
        }
        // 重新加载spu列表
        this.getSpuInfoList();
      } catch (error) {
        this.$message({
          message: "删除失败",
          type: "error",
        });
      }
    },
    // 点击添加sku，去往添加skud卡片
    goAddSku(row) {
      const { id, tmId, category3Id } = row;
      this.showCard = 2;
      // 调用子组件中的函数
      this.$refs.addSku.getSaleAttrList(id, row.spuName);
      this.$refs.addSku.getSpuImageList(id);
      this.$refs.addSku.getAttrInfoList(id, tmId, category3Id);
    },
    // 展示Dialog
    async showDialog(row) {
      this.loading = true
      this.dialogVisible = true;
      this.title = row.spuName;
      // 发送请求，获取sku列表数据
      const result = await this.$API.spu.reqSkuInfo(row.id);
      if (result.code === 200) {
        this.skuInfoList = result.data;
        this.loading = false
      }
    },
    // 关闭对话框前的回调
    handleClose(done) {
      this.skuInfoList = [];
      done();
    },
  },
};
</script>

<style>
</style>